<?php
  require_once dirname(__FILE__)."/purin2/core/core.php";
  require_once dirname(__FILE__)."/purin2/user/session.php";
  if (empty($pu_user_nick_no_csrf)) {
	header("Location: purin2/user/login.php?redirect=/tmweb/");
	die();
  }
  $tmweb_root = '';
?>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- link rel="stylesheet" href="index.css" type="text/css" / -->
  	<!-- link rel="alternate" title="RSS - Chat" href="rss.php" type="application/rss+xml" / -->
  	<link rel="icon" type="image/png" href="favicon.png"/> 
		<title>The Mana Web</title>
  	<script type="text/javascript" src="common.js"></script>
  	<script type="text/javascript" src="index.js"></script>
  	<script type="text/javascript" src="weird.js"></script>
  	<script type="text/javascript" src="sprite.js"></script>
  	<script type="text/javascript" src="avatar.js"></script>
  	<script type="text/javascript" src="map.js"></script>
  	<script type="text/javascript" src="items.js"></script>
  	<script type="text/javascript" src="purin2/core/core.js"></script>
  	<script type="text/javascript" src="purin2/xtr/xtr.js"></script>
  	<script type="text/javascript" src="update.js"></script>
  	<script type="text/javascript" src="loader.js"></script>
		<link rel="stylesheet" href="colorpicker.css" type="text/css" />
  	<script type="text/javascript" src="colorpicker.js"></script>
  	<style>
  	body {
			font-family: dejavu-sans, helvetica;
			/*
			max-width: 642px;
			margin-left: auto;
			margin-right: auto;
			*/
		}
  	select {
  	  width: 150px;
  	}
  	canvas {
  	  border: 1px solid black;
      background: black;
  	  /* background: #070 url('graphics/tiles/_grass.png'); */
  	}
  	div.title {
			background: url('favicon.png') no-repeat 0px 2px;
			padding-left: 20px;
			font-weight: bold;
			height: 22px;
		}
  	div.title a {
			text-decoration: none;
      color: green;
		}
  	div.title a:hover {
			text-decoration: underline;
		}
  	div.menu {
			border: 0px solid red;
			height: 22px;
			margin-left: 250px;
			width: 640px;
		}
		div.login a {
      color: blue;
			text-decoration: none;
		}
		div.login a:hover {
			text-decoration: underline;
		}
		div.login {
			float: right;
		}
		#debug {
			/* display: none; */
		}
		div.debug {
			/* display: none; */
		}
		div.debugactions {
			display: none;
		}
		div.debuglayers {
			display: none;
		}
		div.equipment {
			margin-top: 22px;
			float: left; 
			border: 0px solid gray; 
			width: 245px; 
			text-align: right;
		}
		div.equipmenttitle {
			font-weight: bold;
			text-align: left;
			color: gray;
			border-top: 1px solid gray;
		}
		
		div.equipment p {
			text-align: left;
			margin-top: 0px;
		}
		
		button.colorbutton {
		  width: 12px;
		  padding-left: 0px;
		}
    
    #chat {
      background: white;
      width: 640px;
    }
    #chat:focus {
      background: yellow;
    }
  	</style>
	</head>
	<body onload="onLoad()" onkeydown="return bodyOnKeyDown(this,event)" onkeyup="return bodyOnKeyUp(this,event)">

	  <div class="equipment">

	
		<div class="debugactions">
			Action
			<select id="selAction1" onchange="action=document.getElementById('selAction1').value;updatePlayer();">
				<option value="stand">stand</option>
				<option value="walk">walk</option>
				<option value="sit">sit</option>
				<option value="dead">dead</option>
				<option value="attack">attack</option>
				<option value="attack_bow">attack_bow</option>
			</select>
			<br />
		
			Animation
			<select id="selAnimation1" onchange="animation=document.getElementById('selAnimation1').value;updatePlayer();">
				<option value="left">left</option>
				<option value="right">right</option>
				<option value="up">up</option>
				<option value="down">down</option>
			</select>
			<br />
			
		</div>
		
		<div class="equipmenttitle">Equipment</div>
	
	  Head
	  <select id="selHead1" onchange="OnChangeHead(this,event)">
	  </select>
	  <!-- button title="Change equipment color" onclick="ChangeEquipmentColor('head')"></button -->
	  <br />
	  
	  Hairstyle
	  <select id="selHairstyle1" onchange="OnChangeHairstyle(this,event)">
	  </select>
	  <button title="Change equipment color" class="colorbutton" onclick="ChangeEquipmentColor('hairstyle')">?</button>
	  <br />
	  
	  Chest
	  <select id="selChest1" onchange="OnChangeChest(this,event)">
	  </select>
	  <!-- button title="Change equipment color" onclick="ChangeEquipmentColor('chest')"></button -->
	  <br />
	  
	  Leg
	  <select id="selLeg1" onchange="OnChangeLeg(this,event)">
	  </select>
	  <!-- button title="Change equipment color" onclick="ChangeEquipmentColor('leg')"></button -->
	  <br />
	  
	  Feet
	  <select id="selFeet1" onchange="OnChangeFeet(this,event)">
	  </select>
	  <!-- button title="Change equipment color" onclick="ChangeEquipmentColor('feet')"></button -->
	  <br />
	  
	  Hands
	  <select id="selHands1" onchange="OnChangeHands(this,event)">
	  </select>
	  <!-- button title="Change equipment color" onclick="ChangeEquipmentColor('hands')"></button -->
	  <br />
	  
	  Race
	  <select id="selRace1" onchange="OnChangeRace(this,event)">
			<option value="0"></option>
			<option value="male">Male</option>
			<option value="female">Female</option>
	  </select>
	  <br />
	  
		<div class="equipmenttitle">How to play</div>

		<p>
		Use <b>arrow keys</b> to move your character. <b>Sit</b> or <b>stand up</b> with <b>"s"</b> key. 
		Change your character's <b>equipment</b> in combo boxes above. 
		If something stop working, try <b>F5</b> to reload page.
    If you get stuck on map, click 
    <?php
    echo '<a href="server/reset.php?pu_user_csrf='.$pu_user_csrf.'">here</a>';
    ?>
    to warp back to Hurnscald.
    You can report bugs <a href="http://code.google.com/p/ayass/issues/list">here</a>.
		</p>
	  
	  </div>

		<!-- main -->
		<div class="menu">
      <div class="login">
        <?php
        if (empty($pu_user_nick_no_csrf))
          echo '<a href="purin2/login/index.php?redirect='.$tmweb_root.'/tmweb/">login</a>';
        else
          echo '<a href="purin2/user/dologout.php?pu_user_csrf='.$pu_user_csrf.'&redirect='.$tmweb_root.'/tmweb/">logout '.$pu_user_nick_no_csrf.'</a>';
        ?>
      </div>
			<div class="title"><a href="http://code.google.com/p/ayass/source/browse/#svn/trunk/tmweb" title="View source code of this project on code.google.com">The Mana Web</a>
			</div>
			
			<div>
				<canvas id="canvas" width="640" height="480">
				</canvas> 
			</div>
      
      <input type="text" id="chat" name="chat" onkeyup="onChatKeyUp(this,event)"/>
			
      <input id="stop" type="checkbox" />pause
      <!--
      <button onclick="debugClear()">debugClear</button>
			<button onclick="astaUpdate()">astaUpdate</button>
      -->
			<pre id="debug"></pre>
		</div>

		<!-- frame with testing stuff -->
		<div class="debuglayers">
			<button onclick="test()">test()</button>
			<button onclick="test2()">test2()</button>
			<button onclick="ItemsSelects()">ItemsSelects()</button>
	  
	    <input id="chbLayer1" type="checkbox" checked />Ground
	    <input id="chbLayer2" type="checkbox" checked />Fringe
	    <input id="chbLayer3" type="checkbox" checked />Top
	    <input id="chbLayer4" type="checkbox" checked />Over
	    <input id="chbLayer5" type="checkbox" />Collision
	
			<br />
	    X<input id="edtWeirdX1" value="0" size="1" />
	    Y<input id="edtWeirdY1" value="0" size="1" />
    </div>
    
    <div id="ColorPicker"></div>
      
  <!--
  Changes (commit cache):

  Todo:
  - chat messages are hard to read
  - chat messages get out of window if too long and cannot be read
  - it 2 persons sit at same height, they text messages interfere and are hard to read
  - there was some warp point crossing problems on chromium (go left from hurnscald)
  - add checkbox "fast net" for faster asta update
  - first time visiter gets to login page, having no account he must choose register, he fills in register info and register, then he gets redirected to login, he logins but i think he won't get redirect to tmweb
    - perhaps add register option into login screen (maybe reasonable for web but not for intranet app)
    - or maybe login him automatically after registration
  - reg form has dummy admin email
  - make english version for login/register depend on accept language
  - show somewhere how many players are online
  - show players name below avatars
  
  Todo, gameplay:
  - money
  - shop or nps for buying stuff
  - weapons
  - emotes
  - quests
  - npc
  - animals

  Todo, fight:
  - fighting animals
  - dying (being killed by anomals or others in pvp)
  
  Todo, trading:
  - loot picking, storage, loot dropping
  - trading with other players
  - selling loot, buying stuff
  - drops from animals or dead players

  Todo, later, less important:
  - map warp point are very sensitive to be non-modulo 32! their position, their size and also place where they warp
  - color picker slider is affected by sliding window to left in small browser window, some offset related bug
  - because of opera, i made some fixes that would allow rendering not yet fully loaded metasprite or metasprite with
    eqty not set or zero, once again look at it and cleanup it, look for comment: // opera
  - last mile caching read (althought i'm not sure if I can make xmlhttprequest to other domains), virtually there will
    be server on localhost/city/country that simulate wget -qO - while master server will serve changes in indefinete 
    read, caching server will keep local copy, and client will send request to caching server more often than it could
    do to master server
  - i'm puttin websockets on hold, i will be add later (if ever) as optional speadup because it wont work on many networks wher only port 80 is allowed, also it wouldn't work on free webhosting either
  - server/items.php should be server/eqty.php
  - i think map autopan is not good because avatar.x/y is screen related so it would never work good, avatar must use map coordinates, propably
    even discrete coordinates and render movements between somewhat differently
  - sit only works when key is pressed long enough (1/FPS), same for movement
  - handle correctly event when I press left key, then loose focus and release it somewhere else, in this case that key will not be released, simply when
    page loose focus clear key[] array
  - use some more inteligent image loader, because some sprites may use same png and in this case it would be loaded twice
  - avatar creation is mess, first i create some basic avatar then i recreate most of its gear, then i recreate hairstyle 
    with propper color, maybe entire content cleanup would solve this
  - get rid of xmls, it's too many unnecessary rountrips to server, esp. nested xmls
  - quite some time before release, i was spitting globals here and there just to make it work asap, some nasty haks too, gotta clean that up if it want continue being developed nicely

  The Mana Web - Release candidate 1 features:
  - avatar rendering, clothes, hats
  - walk around the map
  - correctly displayed objects and vegetation (in front/behind tree, house, etc..)
  - multiple avatars
  - collisions 
  - login, registration
  - clothes dyeing
  - hair color
  - multiplayer
  - chat
  - multimaps, warp
   
  -->

	</body>
</html>
